Electrons, negative image objects is something we've already seen in previous lessons once when creating
a tray icon and again when taking screenshots with the desktop capturing module.
So to recap, a negative image is essentially an instance of electrons negative image class, allowing
us to better work with images inside of our app, each negative image instance, then representing a
single image.
Whenever an electron module returns an image, it will be of type negative image rather than actual
image data.
This being a shared module, everything will show in.
This lesson applies in the exact same way when working in either the main or the renderer processes.
For the sake of simplicity, however, I'll stick to the renderer for now.
Let's start by creating a negative image instance to work with in Index.
GML require the module as normal const negative image.
Require electron.
Then to demonstrate, I'll be using the Slashdot Panji image already located in the project directory,
assigning to splash a new native image instance of Slashdot PMG, which, unlike we'd normally do,
we don't create directly from the class constructor.
Instead, we can use one of a few static methods on this class to create the instance.
For example, to create it from a file, say native image dot create from path passing in the path to
this image file underscore underscore dir name being the project directory slash splash dot pmg.
So now having a native image object created from this image file, we can do several things with it.
For example, I log out, splash dot, get size.
Save this, reload the web content, and there we see the width and height of that image logged out,
a simple helper method for determining image dimensions, or alternatively, we can convert and output
this image to a number of different formats.
Let's see a couple.
I'll get rid of this content in indexed HTML with a heading of convert splash dot PMG.
Add a button.
Giving this an unclick attribute, calling to PMG label this PMG al duplicator button with two JPEG
instead.
JP G, PG and JP being the two most common image formats we can export from this native image instance,
create the click handles for these buttons being conversion first const to PMG equals a function with
that click event assigning the image data, which is a buffer to PNG splash by calling on the splash
native image to PNG to duplicate this click handler function for the JPA conversion to JPEG naming the
image data jpg splash which we get with splash.
So using the same splash image instant's to jpeg to jpeg.
Unlike two, PNG requires an argument specifying the export quality of the image.
This being a range between zero and 100 with 100 being 100 percent of the original image quality.
So that's our two separate image export types.
One to get a PNG version as the original file is, and one to get a JPEG version.
But as mentioned, these functions return the actual image data in the form of a buffer.
So we'll have to do something with it, like, for example, save it to disk or more specifically,
save to desktop, a function which will create in a second pass this function the image buffer as the
first argument and the image extension or type as the second PNG and JPEG.
Next, we can create that function.
Consed save to desktop, taking the data and the extension, then step one in this function is to get
the absolute path to the desktop which are assigned to desktop path.
I could of course hard code this for my own file system, but to do this properly, let's get it from
the app instance.
I'll use a simple epoxy handler.
You could have also used the remote module.
If that's enabled for your app, require the epoxy renderer module assigning to this desktop path variable.
The return of epoxy renderer invoke up path the name of the channel we are calling this invocation on.
Then to handle this head over to main require ipsi main and right at the top here use ipsi main to handle
a path.
That invocation we just created past.
There's a callback in which we can simply return the value of up get path for desktop there.
That should do this should be very familiar from previous lessons, but if not refer to the app lesson
and the main process modules and invoke and handle under IPSI messaging.
Then to right the image data to the desktop, we can use notes built in FS module or file system calling
fs dot right file require that module.
Const aifs equals require fhs pass, right, file the file, name and path to write this image data
to starting with desktop paf slash splash dot extension.
That extension we're passing in from either function call then the image data and lastly, the required
callback function, this callback providing an error object only.
So I'll simply have console dialog be the callback, not forgetting that this invoke function returns
a promise.
So in order to await the value of that return promise when it resolves, we also have to make the save
to desktop function async there again.
If you're not familiar with handling promises, using async and await, I've linked to some tutorials
in the lesson.
Resources save both maned and indexed on HTML, this time causing a reload.
And now take note that my desktop is in the background here where the new image files will be written
to click PMG.
And there we get a PNG image of Slashdot being written to the desktop, same as the original image tried
JPEG.
And the same, except this time the original was converted to JPEG format.
The other two options for exporting the image data are being to bitmap, not a common export format
and data neutral, a very useful format for use on the Web.
I'll add another button to demonstrate this calling to tag being an HTML tag label this button show
break to a new line and to show this data, you are all in an HTML tag ad an image tag.
Leave the source attribute empty for now, giving the tag an I.D. with which to select it.
Preview.
We still need a click handler for the show button.
Duplicate one of these again.
To tag, we're not writing to the desktop this time, to remove this function calling splash dot to
data, you are able to get a data.
You are all of the original splash image assigning the you are able to splash you R-AL then to show
this image in that new image tag selected by ID document DOGIT element by I.D. Preview setting its source
property that source attribute in the tag to the data you url splash.
You are all save this.
Reload.
Click show, and there we have it, the image tags source is assigned the data you URL of the original
image and displayed as with any other URL pointing to an image.
The native image also allows us to manipulate images beyond simple export formats.
For example, this image being too large for the window.
We can resize it to say a quarter of its original size.
Still in this function start by getting the original images splashed out, get size and then before
creating the data URL, call resize, resize returns a native image instance of the resized image so
we can daisy chain that to data.
You are onto this like so pass this.
The new dimensions as in electron sized object, a size object simply being an object with a width and
height parameter setting width to size, dot width.
So the original image width divide by four, making it a quarter of the original size and the same for
height, size, dot height divide by four.
And lastly will have to make sure these new width and height values is still integers and not floating
point or decimals, which is very likely as a result of this division.
We can round them off to the nearest pixel worth math dot round there, save this reload click show
again and we get the resized version of the image as a data.
You are all at exactly a quarter of the original size.